<template>
  <view class="page-container">
    <!-- 标题 -->
    <view class="page-title">开户许可证认证</view>
    
    <!-- 开户许可证模块 -->
    <view class="license-section">
      <view class="section-header">
        <text class="section-title">开户许可证</text>
        <view class="status-tag" :class="{ 'failed': !isApproved }">
          {{ isApproved ? '审核通过' : '审核未通过' }}
        </view>
      </view>
      
      <view class="reupload-btn" @click="handleReupload">
        <text>重新上传</text>
      </view>
      
      <view class="notice-text">
        以下信息为系统自动识别，如不正确请修改
      </view>
      
      <!-- 表单区域 -->
      <view class="form-container">
        <view class="form-item">
          <text class="form-label">开户名称</text>
          <input 
            class="form-input" 
            v-model="formData.accountName" 
            placeholder="请输入开户名称"
            placeholder-class="placeholder"
          />
          <text class="error-msg" v-if="errors.accountName">{{ errors.accountName }}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">开户行</text>
          <picker 
            class="form-input" 
            mode="selector" 
            :range="bankOptions"
            @change="handleBankChange"
          >
            <view class="picker-content">
              {{ formData.bank || '请选择开户行 >' }}
            </view>
          </picker>
          <text class="error-msg" v-if="errors.bank">{{ errors.bank }}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">开户省市</text>
          <picker 
            class="form-input" 
            mode="region" 
            @change="handleRegionChange"
          >
            <view class="picker-content">
              {{ formData.region.length > 0 ? formData.region.join('/') : '请选择开户省市区/县 >' }}
            </view>
          </picker>
          <text class="error-msg" v-if="errors.region">{{ errors.region }}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">开户支行</text>
          <input 
            class="form-input" 
            v-model="formData.branch" 
            placeholder="请输入开户支行"
            placeholder-class="placeholder"
          />
          <text class="error-msg" v-if="errors.branch">{{ errors.branch }}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">银行账号</text>
          <input 
            class="form-input" 
            v-model="formData.accountNumber" 
            placeholder="请输入银行账号"
            placeholder-class="placeholder"
            type="number"
          />
          <text class="error-msg" v-if="errors.accountNumber">{{ errors.accountNumber }}</text>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="handleSubmit">
      <text>确认提交</text>
    </view>
    
 
    <view class="divider"></view>
    
    <!-- 未填写提示 -->
    <view class="error-tips" v-if="showErrorTips">
      <view v-for="(error, index) in errorMessages" :key="index">
        {{ error }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

// 表单数据
const formData = reactive({
  accountName: '',
  bank: '',
  region: [],
  branch: '',
  accountNumber: ''
})

// 错误信息
const errors = reactive({
  accountName: '',
  bank: '',
  region: '',
  branch: '',
  accountNumber: ''
})

// 模拟审核状态
const isApproved = ref(false)

// 银行选项
const bankOptions = ref([
  '中国工商银行',
  '中国建设银行',
  '中国农业银行',
  '中国银行',
  '交通银行',
  '招商银行'
])

// // 未填写提示信息
// const errorMessages = computed(() => {
//   const messages = []
//   if (!formData.accountName) messages.push('请输入开户名称')
//   if (!formData.bank) messages.push('请选择开户行')
//   if (formData.region.length === 0) messages.push('请选择开户省市区/县')
//   if (!formData.branch) messages.push('请输入开户支行')
//   if (!formData.accountNumber) messages.push('请输入银行账号')
//   return messages
// })

// // 是否显示错误提示
// const showErrorTips = computed(() => {
//   return errorMessages.value.length > 0
// })

// 处理银行选择
const handleBankChange = (e) => {
  const index = e.detail.value
  formData.bank = bankOptions.value[index]
  errors.bank = ''
}

// 处理地区选择
const handleRegionChange = (e) => {
  formData.region = e.detail.value
  errors.region = ''
}

// 重新上传
const handleReupload = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      // 这里处理上传逻辑
      console.log('选择图片:', res.tempFilePaths)
      uni.showToast({
        title: '上传成功',
        icon: 'success'
      })
    }
  })
}

// 表单验证
const validateForm = () => {
  let isValid = true
  
  if (!formData.accountName) {
    errors.accountName = '请输入开户名称'
    isValid = false
  }
  
  if (!formData.bank) {
    errors.bank = '请选择开户行'
    isValid = false
  }
  
  if (formData.region.length === 0) {
    errors.region = '请选择开户省市区/县'
    isValid = false
  }
  
  if (!formData.branch) {
    errors.branch = '请输入开户支行'
    isValid = false
  }
  
  if (!formData.accountNumber) {
    errors.accountNumber = '请输入银行账号'
    isValid = false
  } else if (formData.accountNumber.length < 16 || formData.accountNumber.length > 19) {
    errors.accountNumber = '请输入正确的银行账号(16-19位)'
    isValid = false
  }
  
  return isValid
}

// 提交表单
const handleSubmit = () => {
  if (validateForm()) {
    uni.showLoading({
      title: '提交中...'
    })
    
    // 模拟API请求
    setTimeout(() => {
      uni.hideLoading()
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      isApproved.value = true
    }, 1500)
  } else {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss">
.page-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 10rpx;
}

.license-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-right: 20rpx;
    }
    
    .status-tag {
      font-size: 24rpx;
      padding: 6rpx 16rpx;
      border-radius: 30rpx;
      background-color: #52c41a;
      color: #fff;
      
      &.failed {
        background-color: #ff4d4f;
      }
    }
  }
  
  .reupload-btn {
    color: #1890ff;
    font-size: 28rpx;
    margin-bottom: 30rpx;
    text-decoration: underline;
  }
  
  .notice-text {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
}

.form-container {
  .form-item {
    margin-bottom: 30rpx;
    position: relative;
    
    .form-label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .form-input {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      background-color: #f9f9f9;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .picker-content {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      background-color: #f9f9f9;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #999;
    }
    
    .error-msg {
      position: absolute;
      bottom: -40rpx;
      left: 0;
      font-size: 24rpx;
      color: #ff4d4f;
    }
  }
}

.submit-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin: 40rpx 0;
}


.divider {
  height: 1rpx;
  background-color: #eee;
  margin: 30rpx 0;
}

.error-tips {
  font-size: 26rpx;
  color: #ff4d4f;
  
  view {
    margin-bottom: 10rpx;
  }
}

.placeholder {
  color: #ccc;
  font-size: 28rpx;
}
</style>